/**
* Created by ren on 2017/1/4.
*/
<template>
  <div class='deposit' v-if="bankData.length>0">
    <div style="line-height: 54px;padding-left:40px;border: 1px solid #cccccc;">
      <img :src='bankData[0].mPicture'
           style="width: 30px;margin-right: 32px;margin-top: -2px">
      <span>{{bankData[0].bankName}}（{{bankData[0].account.substring(bankData[0].account.length-4)}}）</span>
    </div>
    <div style="line-height: 54px;padding-left:40px;background:#f5f5f5;margin-top: 30px">
      <span style="margin-right: 117px">到账时间</span> <span style="color: #999999">以完成时间为准，预计1~3个工作日后到账</span>
    </div>
    <div style="padding-left:40px;margin-top: 20px">
      <span style="color: #fd8f23">可转出金额：{{cash}}元</span>
    </div>
    <div style="line-height: 54px;margin-top: 30px">
      <span>转出金额：</span> <input type="text" v-model="num" placeholder="请输入要转出的金额，最大金额五位数"
                                style="width: 521px;height: 54px;padding-left: 20px">
    </div>
    <div style="line-height: 54px;margin-top: 30px">
      <span>支付密码：</span> <input type="password" v-model="password" autocomplete="new-password" placeholder="支付密码"
                                style="width: 521px;height: 54px;padding-left: 20px">
    </div>
    <div style="text-align: center;margin-bottom: 225px">
      <button class="btn"
              style="width: 170px;height: 49px;color: white;background: #f48315;margin-top: 138px;font-size: 20px"
              @click="extractCash">确定提现
      </button>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
  <div v-else style="text-align: center;margin-top: 200px">
    <span>先绑定银行卡，再进行提现！</span>
  </div>
</template>

<script>
  import API from '../../api'
  import Notify from '../Notify'
  import md5 from 'blueimp-md5'
  export default {
    name: 'deposit',
    components: {
      Notify
    },
    props: ['_parentThis'],
    data: function () {
      return {
        num: '',
        notifyStatus: 2,
        bankData: [],
        cash: '0.00',
        password: ''
      }
    },
    methods: {
      findMyBankList: function () {
        this.$http.post(API.findMyBankList, {
          userId: this.$cookie.get('id'),
          nextPage: 0,
          pageSize: 10000
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            var bankName = ['福建兴业', '广州信合', '广州商业', '华夏', '徽商', '江苏', '交通', '南京', '上海浦东', '上海', '深圳发展', '招商', '浙商', '工商', '光大', '建设', '民生', '农业', '邮政', '中信', '北京', '中国']
            var mPicture = ['iconfont-xingyeyinxing', 'guangzhoushinongcunxin-yonghezuoshe', 'iconfont-guangzhoushangye01', 'iconfont-huaxiayinxing', 'huishang-yinhang', 'jingsu-yinhang', 'iconfont-jiaotongyinxing', 'iconfont-iconfontnanjing', 'iconfont-iconfontshanghaipudongfazhanyinxing', 'shanghai-yinhang', 'iconfont-icon0201fuben13', 'iconfont-zhaoshangyinxing', 'iconfont-zheshangyinxing', 'iconfont-zhongguogongshangyinxing', 'zhongguoguangda-yinhang', 'iconfont-jiansheyinxing', 'zhongguomingsheng-yinhang', 'iconfont-nongyeyinxing', 'iconfont-zhongguoyouzhengchuxuyinxing', 'iconfont-zhongxinyinxing', 'iconfont-iconfontbeijingyinxing', 'iconfont-zhongguoyinxing']
            for (var i = 0; i < result.object.length; i++) {
              for (var k = 0; k < bankName.length; k++) {
                if ((result.object[i].bankName).indexOf(bankName[k]) >= 0) {
                  result.object[i].mPicture = require('../../assets/my/bank/' + mPicture[k] + '.png')
                }
              }
            }
            this.bankData = result.object

            if (this.bankData.length < 1 && window.confirm('您还未添加银行卡，立即去添加？')) {
              this.$cookie.set('customHandle', 'addBank')
              this.$router.push({name: 'safeMain'})
            }
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      findMyAssets: function () {
        this.$http.post(API.findMyAssets, {
          id: this.$cookie.get('id')
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.cash = (result.object.cash / 100).toFixed(2)
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      extractCash: function () {
        if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(this.num)) {
          this.notifyStatus = '0|提现金额格式不正确！'
          return
        }
        this.$http.post(API.extractCash, {
          userId: this.$cookie.get('id'),
          money: parseFloat(this.num) * 100,
          cardId: this.bankData[0].id,
          payPassword: md5('Au+' + (this.password * 103))
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this._parentThis.notifyStatus = '1|提现成功'
            this._parentThis._parentThis.looseChild = 'parent'
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    mounted: function () {
      this.findMyBankList()
      this.findMyAssets()
    },
    watch: {
      num: function (newVal, oldVal) {
        this.num = newVal.replace(/[^\d.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
        if (this.num.indexOf('.') > -1) {
          var len = this.num.substring(this.num.indexOf('.') + 1).length
          if (len > 2) {
            this.num = this.num.substring(0, this.num.indexOf('.') + 3)
          }
          if (this.num.indexOf('.') > 8) {
            this.num = oldVal
          }
        } else {
          if (this.num.length > 8) {
            this.num = oldVal
          }
        }
      }
    }
  }
</script>
<style>
  .deposit {
    padding: 30px 100px;
    font-size: 18px;
  }
</style>
